import { ElIcon, ElImage, ElUpload } from "element-plus";
import { h } from "vue";
import { Form } from "../model/base/form";
import { List } from "../model/base/list";
import { ListSearch } from "../model/base/list_search";
import { Uploader, showImagePreview, Image, type UploaderFileListItem } from "vant";
import { Plus } from "@element-plus/icons-vue";
import { pagebuttonStore } from "@b/store";
import type { RuleItem } from "async-validator";
import type { listButton } from "@b/model/base/type";

export class SuggestSearch extends ListSearch<interfaceSuggest> {
}
export class SuggestList extends List<interfaceSuggest> {
    constructor() {
        super()
        this.title = "反馈列表"
        this.url.getPage = "/v1/suggest/suggestList"
        this.url.delete = "/v1/suggest/suggestDelete"
        this.labels = {
            id: { prop: 'id', label: 'ID', width: 80 },
            title: { prop: 'title', label: '标题' },
            content: { prop: 'content', label: '内容' },
            readed: {
                prop: 'readed', label: '状态',
                formatter: ({ value }) => value ? '已处理' : h('div', { style: 'color:var(--el-color-primary)' }, '未处理')
            },
            ImgSuggests: {
                prop: 'ImgSuggests', label: '截图', formatter: ({ value }) => value && value[0] ? h(ElImage, { src: value[0]?.fullUrl }) : '无'
            }
        }
        this.actions = () => {
            const but = pagebuttonStore().button;
            const actions: listButton<interfaceUser>[] = []
            if (but.has('suggestInfo')) {
                actions.push({
                    text: but.get('suggestInfo') || '', color: 'var(--van-primary-color)', onClick: (data) => {
                        this.routerToInfo(data.id)
                    }
                })
            }
            if (but.has('suggestSelfInfo')) {
                actions.push({
                    text: but.get('suggestSelfInfo') || '', color: 'var(--van-primary-color)', onClick: (data) => {
                        this.routerToSelfInfo(data.id)
                    }
                })
            }
            if (but.has('suggestDelete')) {
                actions.push({
                    text: but.get('suggestDelete') || '',
                    color: 'var(--van-danger-color)', hasConfirm: true, onClick: (data, index) => {
                        this.deleteItem(index)
                    }
                })
            }
            return actions
        }
    }
    routerToInfo(_id?: number) {
        console.log(_id)
        throw new Error('未设置跳转函数')
    }
    routerToSelfInfo(_id?: number) {
        console.log(_id)
        throw new Error('未设置跳转函数')
    }
}
export class SuggestForm extends Form<interfaceSuggest> {
    fileList: any[]
    constructor() {
        super()
        this.show = true
        this.title = "反馈"
        this.fileList = []
        this.url.adddate = "/v1/suggest/addSuggest"
        const vTitle: RuleItem[] = [{
            type: 'string', validator: (rule, value) => value ? value.length <= 16 && value.length >= 2 : true,
            message: '标题长度在2-16之间'
        }]
        const vContent: RuleItem[] = [{
            type: 'string', required: true, validator: (rule, value) => value ? value.length <= 200 && value.length >= 4 : false,
            message: '内容长度为4-200'
        }]

        this.rule = {
            title: vTitle,
            content: vContent
        }
        this.labels = {
            title: {
                prop: 'title',
                label: '标题',
                show: ({ data }) => data.step === 0,
                rule: Form.getVantRule(vTitle)
            },
            content: {
                prop: 'content',
                label: '内容', type: 'textarea',
                rule: Form.getVantRule(vContent)
            },
            ImgSuggests: {
                prop: 'ImgSuggests',
                label: '截图',
                width: '90%',
                show: ({ type }) => type === "detail",
                formatter: ({ value }) => h('div', {}, value?.map(item =>
                    h(ElImage, { src: item.fullUrl, alt: '问题截图', previewSrcList: value.map(it => it.fullUrl), style: { height: '120px', width: '120px', marginRight: '12px' } }))),
                p_formatter: ({ value }) => h('div', {}, value?.map(item =>
                    h(Image, {
                        src: item.fullUrl, alt: '问题截图', style: { height: '4em', width: '4em', marginRight: '12px' }, onClick: () => {
                            showImagePreview(value.map(item => item.fullUrl))
                        }
                    })))
            },
            imgs: {
                prop: 'imgs',
                label: '截图',
                width: '90%',
                show: ({ type }) => type === 'form',
                vform: ({ prop, data }) => {
                    return h('div', {}, h(ElUpload, {
                        class: 'avatar', fileList: this.fileList, multiple: true, listType: 'picture-card',
                        autoUpload: false, accept: 'image/*', onChange: async (file, files) => {
                            data[prop] = files.map(item => item.url || '')
                        }, onRemove: (file, files) => {
                            data[prop] = files.map(item => item.url || '')
                        }
                    }, { default: () => h(ElIcon, {}, { default: () => h(Plus) }) }))
                },
                p_vform: ({ prop, data }) => {
                    return h(Uploader, {
                        resultType: 'file',
                        modelValue: this.fileList, "onUpdate:modelValue": (val: UploaderFileListItem[]) => {
                            const value = val.map((item) => item.url ? item.url : item.file ? URL.createObjectURL(item.file) : '')
                            this.fileList = val.map((item) => ({
                                ...item,
                                url: item.url ? item.url : item.file ? URL.createObjectURL(item.file) : ''
                            }))
                            data[prop] = value
                        }
                    })
                }
            }
        }
    }
}
export class SuggestDetail extends List<interfaceSuggest> {
    constructor() {
        super()
        this.title = "反馈"
        this.url.getPage = "/v1/suggest/suggest"
    }
}
export class SelfSuggestList extends List<interfaceSuggest> {
    constructor() {
        super()
        this.title = "反馈列表"
        this.limit = 20
        this.url.getPage = "/v1/suggest/notRead"
        this.reSetphone = true
        this.immediateCheck = false
    }
    async read() {
        this.getPage()
    }
    async allRead() {
        const res = await this.request('/v1/suggest/allRead')
        if (res) {
            this.list = []
        }
    }
}
export class AdminSuggestList extends List<interfaceSuggest> {
    constructor() {
        super()
        this.title = "反馈列表"
        this.limit = 20
        this.url.getPage = "/v1/suggest/notFinish"
        this.reSetphone = true
        this.immediateCheck = false
    }
}